<%--
  Created by IntelliJ IDEA.
  User: baobao
  Date: 2016/5/15
  Time: 14:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<!DOCTYPE html>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="from"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/resources/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/resources/easyui/themes/icon.css">
    <script type="text/javascript" src="<%=request.getContextPath() %>/resources/easyui/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath() %>/resources/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath() %>/resources/easyui/locale/easyui-lang-zh_CN.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/resources/style/main.css">
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/resources/style/icon.css">




</head>
<body>
<style>

    .tag_r {
        padding: 5px;
        background-color:red;
        color: white;
        width: 30px;
        border-radius: 5px;
        margin: 50px 5px
    }

    .tag_e {
        padding: 5px;
        background-color:grey;
        color: white;
        width: 30px;
        border-radius: 5px;
        margin: 50px 5px
    }

    .info{
        padding: 10px;
        background-color: gainsboro;
        border-style: solid;
        border-color: grey;
        border-radius: 5px;
        border-width: 1px;
    }
</style>
        <div style="padding: 15px;">


                <h1>Recommendation Results ( No: ${dataBaseId} )</h1>
                <hr>

                <div style="margin: 15px 0px">Recommendation Reviewers:</div>
            <%--tags--%>
                <div id="recommendation_tags">
                </div>

                <div style="margin: 15px 0px">Actual Reviewers:</div>
            <%--tags--%>
                <div id="actual_tags">
                </div>

                <div style="margin: 15px 0px">Precision:</div>
                <div id="precision_progress" class="easyui-progressbar" data-options="value:0" style="width:400px;"></div>

                <div style="margin: 15px 0px">Recall:</div>
                <div id="recall_progress" class="easyui-progressbar" data-options="value:0" style="width:400px;"></div>

                <div style="margin: 15px 0px">Recommendation Core Members:</div>
            <%--tags--%>
                <div id="recCoreMembers_tags">
                </div>

                <div style="margin: 15px 0px">Actual Core Members:</div>
            <%--tags--%>
                <div id="actCoreMember_tags">
                </div>
                <div style="margin: 15px 0px">
                    <p class="info" >

                    </p>
                </div>


        </div>


        <script>
//            $('#precision_progress').progressbar({
//                value: 60
//            });
//            $('#recall_progress').progressbar({
//                value: 80
//            });

            Array.intersect = function(a, b){
                return a.uniquelize().each(function(o){return b.contains(o) ? o : null});
            };

            var data=${caseJson};
            var tagReals = data['TagReal'];
            var tagRecs=data['TagRec'];
            var answererReals = data['AnswererReal'];
            var answererRecs = data['AnswererRec'];
            $(".info").text(data['detail']);
            var samecounter=0;

            for(var i=0; i<tagReals.length; i++){
                var issame=false;
                for(var j=0; j<tagRecs.length; j++){
                    if(tagReals[i]==tagRecs[j]){
                        $("#recommendation_tags").append('<span class="tag_r">'+tagReals[i]+'</span>');
                        issame=true;
                        samecounter++;
                        break;
                    }
                }
                if(!issame){
                    $("#recommendation_tags").append('<span class="tag_e">'+tagReals[i]+'</span>');
                }


            }

            for(var i=0;i<tagRecs.length;i++){
                var issame=false;
                for(var j=0;j<tagReals.length;j++){
                    if(tagRecs[i]==tagReals[j]){
                        $("#actual_tags").append('<span class="tag_r">'+tagRecs[i]+'</span>');
                        issame=true;break;
                    }
                }
                if(!issame){
                    $("#actual_tags").append('<span class="tag_e">'+tagRecs[i]+'</span>');
                }
            }

            $('#precision_progress').progressbar({
                value: Math.ceil(samecounter  * 100/ tagReals.length)
            });
            $('#recall_progress').progressbar({
                value: Math.ceil(samecounter  * 100  / tagRecs.length)
            });



            for(var i=0;i<answererReals.length;i++){
                var issame=false;
                for(var j=0;j<answererRecs.length;j++){
                    if(answererReals[i]==answererRecs[j]){
                        $("#actCoreMember_tags").append('<span class="tag_r">'+answererReals[i]+'</span>');
                        issame=true;break;
                    }
                }
                 if(!issame) {
                     $("#actCoreMember_tags").append('<span class="tag_e">' + answererReals[i] + '</span>');
                 }
            }

            for(var i=0; i<answererRecs.length; i++){
                var issame=false;
                for(var j=0;j<answererReals.length;j++){
                    if(answererRecs[i]==answererReals[j]){
                        $("#recCoreMembers_tags").append('<span class="tag_r">'+answererRecs[i]+'</span>');
                        issame=true;
                        break;
                    }
                }
                if(!issame){
                    $("#recCoreMembers_tags").append('<span class="tag_e">'+answererRecs[i]+'</span>');
                }
            }


//            var preGress = Array.intersect(tagReals,tagRecs).length*1.0 / tagReals.length;
//            var preGress2 = Array.intersect(answererReals,answererRecs).length*1.0/answererRecs.length;
//            console.log(preGress);
//            console.log(preGress2);
//            var json = eval("("+rawdata+")");
//            for(var j in json){
//                var key = j;
//                console.log(key);
//                var value = json[j];
//                console.log(value);
//            }




        </script>


</body>
</html>
